<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣图书TOP250</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    </head>
<body>
<nav class="navbar navbar-inverse" role="navigation" >
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href={% url 'app:index' %}>APP主页</a> 
        </div>
        <div>
            <form class="navbar-form navbar-right"  method="POST" action="{% url 'app:publish_search' %}">
            {% csrf_token %}
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search Publishing House" name="housename">
                </div>
                <button type="submit" class="btn btn-default">Search</button>
            </form>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href={% url 'app:pie_graph' %}>饼状图</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            柱状图
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:bar_chart' %}>柱状图一</a></li>
                            <li><a href={% url 'app:bar_chart_2' %}>柱状图二</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            出版社排行
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:publish_house_info_1' %}>所获评分最高</a></li>
                            <li><a href={% url 'app:publish_house_info_2' %}>评价人次最多</a></li>
                            <li><a href={% url 'app:publish_house_info_3' %}>出版优秀图书最多</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<h1 style='title' align='center'>出版社信息(按出版优秀图书数量排序)</h1><br/>
    <div class='container'>
        <div class='row'>
            {% for house in current_page %}
            <div class='col-sm-4'>
                <div class='card', style='width: 20rem; height: 10rem;'>
                    <div class='card body'>
                        <h3 class='card-title'>{{house.name}}</h3>
                        <p class='card-text'>
                            平均评分为：{{ house.c }}<br/>
                        </p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
<nav aria-label="Page navigation" align='center'>
    <ul class="pagination">
        {% if current_page.has_previous %}
            <li>
                <a href="?page={{ current_page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        {% endif %}

        {% for item in page_range %}
            {% if current_page_num == item %}
                <li class="active" ><a href="?page={{ item }}">{{ item }}</a></li>
            {% else %}
                <li><a href="?page={{ item }}">{{ item }}</a></li>
            {% endif %}
        {% endfor %}


        {% if current_page.has_next %}
            <li><a href="?page={{ current_page.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>
        {% else %}
            <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>
        {% endif %}
    </ul>
</nav>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script> 
</body>
</html>